<template>
  <div class="wrap"> 
    <div class="banner">
      <mt-swipe :auto="4000">
        <mt-swipe-item>
          <img :src="banner">
        </mt-swipe-item>
      </mt-swipe>
    </div>
    <div class="menu-box2">
      <div class="box-warp" v-for="(item, index) in menuList" :key="index" @click="go(item)">
        <div class="box">
          <img :src="item.thumbnail">
        </div>
        <p class="rd-title">{{item.cateName}}</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        menuList: [],
        data: '',
				dataList: [],
        banner: ''
      }
    },
    methods: {
      go: function (item) {
        var that = this
        var path = ''
				if (item.address === 'map') {
					var lat = that.dataList[1].split('=')[1]
					var name = that.dataList[2].split('=')[1]
					window.location.href = 'https://m.amap.com/navi/?dest='+lat+'&destName='+name+'&key=05ad08ed4721f4b9d8cd48c87c82ea1d'
					return false;
				} else if (item.address === 'question') {
					that.$router.push({
						name: item.address,
						query: {
							lat: that.dataList[1].split('=')[1],
							name: that.dataList[2].split('=')[1],
							address: that.dataList[3].split('=')[1],
							phone: that.dataList[4].split('=')[1]
						}
					})
					return false;
				} else {
					var community = that.dataList[0].split('=')[1]
					that.$router.push({
						name: item.address,
						query: {
							id: item.id,
							community: community
						}
					})
				}
      },
      getParams () {
        var that = this
        that.data = that.$route.query.data
				that.dataList = that.data.split('&')
				document.title = that.dataList[2].split('=')[1]
        that.$axios.requestget('/page/category/130')
          .then((res) => {
            that.banner = res.banner
            that.menuList = res.categories
          })
      }
    },
    mounted () {
      this.getParams()
    }
  }
</script>

<style>
  .menu-box2 {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background: #fff;
  }

  .box-warp {
    width: 33.33%;
    padding: 36px 0;
    box-sizing: border-box;
    border-right: #cdcdcd solid 1px;
    border-bottom: #cdcdcd solid 1px;
  }

  .box-warp:nth-child(3) {
    border-right: none;
  }
  .box-warp:nth-child(6) {
    border-right: none;
  }
  .box-warp:nth-child(9) {
    border-right: none;
  }

  .box {
    width: 88px;
    height: 88px;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    overflow: hidden;
  }

  .box>img {
    width: 100%;
    height: 100%;
  }

  .rd-title {
    margin-top: 16px;
    text-align: center;
    font-size: 22px;
    color: #323232;
  }
</style>
